<template>
	<view class="page">
		<view class="uni-padding-wrap">
            <view class="page-section swiper">
                <view class="page-section-spacing">
                    <swiper class="swiper" indicator-dots="true" autoplay="true" interval="3000" duration="500">
                        <swiper-item v-for="(item,index) in lunbo" :key='index'>
							<image :src="baseURL+item.url" mode="" @click="gopage('Goods_details?data='+item.to_page)"></image>
                        </swiper-item>
                    </swiper>
                </view>
            </view>
        </view>
		<view class="titleimg" @click="gopage('shopcar') "><image src="../../static/shopHOT.png" mode=""></image></view>
		<view class="uni-product-list">
			<view class="uni-product" v-for="(product,index) in productList" :key="index" @click="gopage('Goods_details?data='+product.id)">
				<view class="image-view">
					<image v-if="renderImage" class="uni-product-image" :src="baseURL+product.cover_pic"></image>
				</view>
				<view class="uni-product-title">{{product.name}}</view>
				<view class="uni-product-price">
					<!-- <text class="uni-product-price-favour">￥{{product.originalPrice}}</text> -->
					<text class="uni-product-price-original" style="color:#ed7d2b;font-size:34upx;font-weight:bold;">￥{{product.price}}</text>
					<!-- <text class="uni-product-tip">{{product.tip}}</text> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import API from '../../common/api.js';
export default {
    data() {
        return {
            title: 'product-list',
			productList: [],
            renderImage: false,
			page:1,
			rows:10,
			baseURL:API.baseURL,
			lunbo:[],
        };
    },
    methods: {
		gopage(e){
			uni.navigateTo({
				url:e
			})
		},
		mallLunbo() {
			var _this=this;
			uni.request({
				url:API.mallLunbo,
				method:"GET",
				header:API.get_head(),
				success: (res) => {
					_this.lunbo = res.data;
				},
				fail: () => {
					uni.showToast({
						title:"加载失败",
						icon:'none'
					})
				}
			})
		},
        loadData(action = 'add') {
			var _this=this;
			uni.request({
				url:API.mMallGoods,
				method:"GET",
				data:{page:_this.page,rows:_this.rows},
				header:API.get_head(),
				success: (res) => {
					if (action === 'refresh') {
					    _this.productList = [];
					}
					res.data.rows.forEach(item => {
					    _this.productList.push(item);
					});
					_this.page = _this.page+1
				},
				fail: () => {
					uni.showToast({
						title:"加载失败",
						icon:'none'
					})
				}
			})
        },
    },
    onLoad() {
        this.loadData();
        setTimeout(()=> {
            this.renderImage = true;
        }, 300);
		this.mallLunbo();
    },
    onPullDownRefresh() {
        this.loadData('refresh');
        // 实际开发中通常是网络请求，加载完数据后就停止。这里仅做演示，加延迟为了体现出效果。
        setTimeout(() => {
            uni.stopPullDownRefresh();
        }, 2000);
    },
    onReachBottom() {
        this.loadData();
    }
};
</script>

<style>
	page{background:#FFFFFF;}
	.titleimg{padding:35upx 24upx;border-bottom:1upx solid #e5e5e5;}
	.titleimg image{width: 130upx;height:32upx;}
	.swiper image{width:100%;}
	.swiper{height:422upx !important;}
	.uni-padding-wrap{width:100%;padding:0;}
</style>
